@height:2px;
@width:18px;
// @bgcolor:currentColor;
@bgcolor:#00b4cf;

@ratio:1.4142;
@rotate:45deg;
@scale:@ratio / (@ratio + 1);
@maigin:@height * 3;
@ty:@width / 4 - @height / @ratio;
@tx:@width / 4 + @height / @ratio;
@anitime:.3s;

.anico{
	position:relative;
	display:inline-block;
	height:100%;
	width:@width;
	.hline,.hline::before,.hline::after{
		position:absolute;
		background-color:@bgcolor;
		border-radius:2px;
		transform:translateZ(0);
	}
	.hline{
		width:@width;
		height:@height;
		display:inline-block;
		left:50%;
		top:50%;
		transform:translateX(-50%) translateY(-50%);
		transition:transform @anitime,background-color @anitime;
		&::before,&::after{
			content:'';
			width:100%;
			height:100%;
			top:0;
			left:0;
			background-color:currentColor;
			transition:transform @anitime;
		}
		&::before{
			transform:translateY(-@maigin);
		}
		&::after{
			transform:translateY(@maigin);
		}
		&.close{
			background-color:rgba(255,255,255,0);
			&::before{
				transform:rotate(@rotate);
			}
			&::after{
				transform:rotate(-@rotate);
			}
		}
		&.right{
			&::before{
				transform:translateX(@tx) translateY(-@ty) rotate(@rotate) scaleX(@scale);
			}
			&::after{
				transform:translateX(@tx) translateY(@ty) rotate(-@rotate) scaleX(@scale);
			}
		}
		&.bottom{
			transform:translateX(-50%) translateY(-50%) rotate(-90deg);
			&::before{
				transform:translateX(-@tx) translateY(-@ty) rotate(-@rotate) scaleX(@scale);
			}
			&::after{
				transform:translateX(-@tx) translateY(@ty) rotate(@rotate) scaleX(@scale);
			}
		}
		&.play{
			transform:translateX(-50%) translateY(-50%) rotate(-90deg);
			background-color:rgba(0,0,0,0);
			&::before{
				transform-origin:0 0;
			}
			&::after{
				transform-origin:100% 100%;
			}
			&.pause{
				background-color:@bgcolor;
				transform:translateX(-75%) translateY(-50%) rotate(-90deg);
				&::before{
					transform:rotate(60deg);
				}
				&::after{
					transform:rotate(-60deg);
				}
			}
		}
	}
}
@media screen and (max-width:1024px){
	.anico{
		.hline{
			&.right{
				background-color:rgba(255,255,255,0);
				&::before{
					transform:rotate(45deg);
				}
				&::after{
					transform:rotate(-45deg);
				}
			}
		}
	}
}	

